<template>
  <div class="window">
    <!-- 返回按钮 -->
    <el-button @click="close">
      <Back style="width: 1em; height: 1em" />
    </el-button>
    <!-- 内容部分 -->
    <slot></slot>
    <!-- 底部按钮 -->
    <div class="footer">
      <div>
        <el-button type="danger" @click="close">取消</el-button>
        <el-button type="success" @click="confirm">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
// 取消编辑并返回
const emit = defineEmits();
const close = () => {
  emit("close");
};

// 发布博客
const confirm = () => {
  emit("confirm");
};
</script>

<style lang="scss" scoped>
.window {
  position: absolute;
  top: 100px;
  left: 270px;
  padding: 20px 20px 10px 20px;
  min-width: 710px;
  width: calc(100% - 290px);
  height: calc(100vh - 120px);
  z-index: 10;
  background-color: #fff;
  box-sizing: border-box;

  .footer {
    display: flex;
    justify-content: center;
  }
}
</style>